<template>
  <!-- 零星采购计划列表 -->
  <div class="e-table">
    <div class="top">
      <div class="left" style="margin-left: 10px;">
        <div>
          <el-button size="mini" @click="buttonAdd()" style="background: #7aa818; color: #fff">新增</el-button>
        </div>
      </div>
      <div class="right">
        <div>
          <el-input placeholder="输入项目编号或机构" v-model="pagination.keyword" size="small"  @blur="search">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="search"></i>
          </el-input>
        </div>
        <div  style="margin-left: 5px;">
          <el-button size="small" style="background: #2e61d7; color: #fff"
             @click="heightSharch"
            >高级搜索</el-button
          >
        </div>
      </div>
    </div>

      <el-table
       class="table"
       border
      ref="table"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @cell-mouse-enter="cellMouseEnter"
      @cell-mouse-leave="cellMouseLeave"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
      >
        <el-table-column type="selection" width="50" v-if="isBatch" fixed>
        </el-table-column>
        <el-table-column label="零星计划编号" min-width="250" fixed  show-overflow-tooltip >
          <template slot-scope="scope">
            <span
              @click="click(scope.row.billId,scope.row.state)"
              style="color: blue; cursor: pointer"
            >
              {{ scope.row.billNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="year"
          label="计划年度"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="month"
          label="计划月份"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="planDate"
          label="计划日期"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="totalAmount"
          label="计划金额（元）"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="settledAmount"
          label="已结算金额（元）"
          width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="isSignContract"
          label="要签合同"
          width="100"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
            <span>{{
              ["否", "是"][scope.row.isSignContract]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
              <ToolHistory v-if="scope.row.state == '1'" :key="scope.$index" url="/material/flowEngin/getAuditHistory" :billId="scope.row.billId" :billType="1005">
                <span   v-status="scope.row.state">
                    {{["草稿", "审核中", "已审核", "已关闭",'', "已作废"][scope.row.state]}}
                </span>
            </ToolHistory>
            <span v-else  v-status="scope.row.state">
                {{["草稿", "审核中", "已审核", "已关闭",'', "已作废"][scope.row.state]}}
            </span>
          </template>
        </el-table-column>
         <el-table-column prop="orgName" label="机构" min-width="250">
        </el-table-column>
        <el-table-column
          prop="lastChangeBillState"
          label="变更状态"
          width="100"
          show-overflow-tooltip
        >
         <template slot-scope="scope">
            <span>{{
              ["草稿", "审核中", "已审核", "已关闭", '',"已作废"][scope.row.lastChangeBillState]
            }}</span>
          </template>
        </el-table-column>
      </el-table>

      <ComPagination
      :total="pagination.total"
            :pageSize.sync="pagination.pageSize"
            :currentPage.sync="pagination.currentPage"
            @currentChange="sporadicPurchasePlanList"
            @sizeChange="sporadicPurchasePlanList"
    />

  </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'
import requests from '@/api/materials/sporadicPurchase.js'
import request from '@/api/materials/plan.js'
import { mapMutations } from 'vuex'
import { vueDom, debounce, advanceSearch, showLoading, hideLoading, } from '@/utils/common.js'
export default {
    components: {
        ComPagination,
    },
    data () {
        return {
            isBatch: false, //是否进入批量操作
            batch: '进入批量管理',
            dialogVisibleSearch: false,
            searchIpt: '',
            input1: '',
            value1: '',
            value2: '',
            multipleSelection: [],
            tableData: [
                {
                    totalAmount: '', //	计划金额(元)
                    billId: '', //	零星采购计划id
                    billNo: '', //	零星采购计划编号
                    lastChangeBillState: '', //
                    isSignContract: '', //	要签合同
                    month: '', //计划月份
                    orgName: '', //	单据机构名称
                    planDate: '', //	计划日期
                    state: '', //	状态
                    year: '', //	计划年度
                    settledAmount: '',
                },
            ],
            MouseEnterId: 0,
            pagination: {
                total: 0,
                pageSize: 20,
                currentPage: 1,
                'beginPlanDate': '',
                'endPlanDate': '',
                'keyword': '',
                'limit': 20,
                'month': null,
                'orgId': '',
                'page': 1,
                'states': [],
                'year': null
            },
        }
    },
    created () {
        showLoading()
        this.sporadicPurchasePlanList()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 170
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 170
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        ...mapMutations(['setSearchData']),
        //模糊搜索
        search () {
            this.sporadicPurchasePlanList()
        },
        //清空高级搜索的数据
        clearData () {
            this.pagination = {
                'beginPlanDate': '',
                'endPlanDate': '',
                'keyword': '',
                'limit': 20,
                'month': null,
                'orgId': '',
                'page': 1,
                'states': [],
                'year': null
            }
            this.setSearchData({ equipSearchData: this.pagination })
        },
        // 高级搜索
        heightSharch () {
            advanceSearch('/sporadicPlanHeightSearch').then(res => {
                this.pagination = res.equipSearchData
                this.res = this.pagination
                this.sporadicPurchasePlanList()
                this.clearData()
            })
        },
        //批量管理
        batchOperation () {
            this.isBatch = !this.isBatch
            if (this.isBatch) {
                this.batch = '退出批量管理'
                this.$refs.table.clearSelection()
            } else {
                this.batch = '进入批量管理'
            }
        },
        cellMouseEnter (row) {
            this.MouseEnterId = row.id
        },
        cellMouseLeave () {
            this.MouseEnterId = 0
        },
        sporadicPurchasePlanList () {
            if(this.pagination.currentPage) {
                this.pagination.page = this.pagination.currentPage
            }
            if(this.pagination.pageSize) {
                this.pagination.limit = this.pagination.pageSize
            }
            requests
                .sporadicPurchasePlanListByEntity(this.pagination)
                .then(res => {
                    this.tableData = res.list
                    this.pagination.total = res.totalCount
                    hideLoading()

                })
        },
        //新增按钮
        buttonAdd () {
            this.$router.push('/sporadicPurchaseAdd')
        },

        //点击编号
        click (billid, state) {
            if(state == -1 || state == 2 || state == 5 ) {
                this.$router.push({
                    path: '/sporadicPurchaseParticulars',
                    query: { billid },
                })
            }else {
                request.getCurrentUnitInfo({
                    'billId': billid,
                    'billType': '1005',
                    'freeNextUnitIndex': 0,
                    'freeNextUser': '',
                    'isPass': true,
                    'isShareInAudit': true,
                    'opinion': '',
                    'orgId': '',
                    'orgName': '',
                    'userId': '',
                    'workId': ''
                })
                    .then(res=>{
                        if(res.canModify) {
                            this.$router.push({
                                path: '/sporadicPurchaseEdit',
                                query: { billid, res },
                            })
                        }else{
                            this.$router.push({
                                path: '/sporadicPurchaseParticulars',
                                query: { billid },
                            })
                        }
                    })
            }

        },
    },
}
</script>
<style lang="scss" scoped>
.like {
  color: rgb(46, 97, 215);
  font-size: 17px;
  line-height: 30px;
  cursor: pointer;
}
::v-deep.el-table .cell {
  text-align: center;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 10px; // 纵向滚动条
}
// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 5px;
}
</style>